<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加课程</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main" style="width: 800px">

        <form class="layui-form layui-form-pane" action="">
            <fieldset class="layui-elem-field">
                <legend>课程设置</legend>
                <div class="layui-field-box">
                    <input id="id" name="id" type="hidden">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">课程名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="courseName" name="courseName" value="" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">课程图片</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="courseP">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>
                    <input name="coursePic" id="coursePic" type="hidden">

                    <div class="layui-form-item">
                        <label class="layui-form-label required">课程描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="courseDescription" value="" id="courseDescription"
                                   class="layui-input">
                        </div>
                    </div>
                    <!--适用人群-->
                    <div class="layui-form-item">
                        <label class="layui-form-label required">适用人群</label>
                        <div class="layui-input-block">
                            <input type="text" name="users" id="users" value="" class="layui-input">
                        </div>
                    </div>
                    <!--设置课程类型-->
                    <div class="layui-form-item">
                        <label class="layui-form-label required">课程类型</label>
                        <div class="layui-input-block">
                            <select id="courseClassifyName" name="courseClassifyName" lay-verify="">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <!--设置课程金额-->
                    <div class="layui-form-item">
                        <label class="layui-form-label required">课程金额</label>
                        <div class="layui-input-block">
                            <input type="number" name="pay" id="pay"
                                   placeholder="请输入课程金额" value="" class="layui-input">
                        </div>
                    </div>
<!--                    设置课程状态-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">课程状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="courseStatus" value="1" title="上架">
                            <input type="radio" name="courseStatus" value="0" title="下架">
                        </div>
                    </div>

                </div>
            </fieldset>

            <fieldset class="layui-elem-field">
                <legend>教师设置</legend>
                <div class="layui-field-box">
                    <!--设置教师-->
                    <div class="layui-form-item">
                        <label class="layui-form-label required">课程教师</label>
                        <div class="layui-input-block">
                            <select name="teachName" id="courseTeachs" lay-verify="">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <!--设置教师图片-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">教师图片</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="teachI">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>
                    <input name="teachImage" id="teachImage" type="hidden">
                </div>
            </fieldset>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>
    $(function () {
        var courseId = window.localStorage.getItem("courseId");
        $.ajax({
            url: "/course/selectOne?id=" + courseId,
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    $("#id").val(res.data.id),
                    $("#courseName").val(res.data.courseName),
                    $("#coursePic").val(res.data.coursePic),
                    $("#courseDescription").val(res.data.courseDescription),
                    $("#pay").val(res.data.pay),
                    $("#users").val(res.data.users),
                    $("#teachImage").val(res.data.teachImage)
                }else {
                    layer.msg(res.msg)
                }
            }
        });

        //课程教师
        $.ajax({
            url: "/teach/findAll?page=1&limit=100",
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    //动态得赋值给select标签 相当于for循环、
                    //1.循环得集合。2.Inde == 循环得对象得下标。3Item 循环得对象本身
                    $.each(res.data, function (index, item) {
                        //通过id选择器获取到select标签，对select标签添加option对象 1.展示得数据 2.value值
                        $("#courseTeachs").append(new Option(item.teachName, item.id))
                    })
                }
            }
        });
        //课程类型
        $.ajax({
            url: "/qfClassify/findAll?page=1&limit=100",
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    //动态得赋值给select标签 相当于for循环、
                    //1.循环得集合。2.Inde == 循环得对象得下标。3Item 循环得对象本身
                    $.each(res.data, function (index, item) {
                        //通过id选择器获取到select标签，对select标签添加option对象 1.展示得数据 2.value值
                        $("#courseClassifyName").append(new Option(item.courseClassifyName, item.id))
                    })
                }
            }
        });
    })


</script>
<script>
    layui.use(['form', 'laydate', 'upload', 'element'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            upload = layui.upload,
            element = layui.element;

        //课程图片上传
        var uploadInst = upload.render({
            elem: '#courseP' //绑定元素
            , url: '/upload' //上传接口
            , before: function () {
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //上传完毕回调
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $("#coursePic").val(res.data);
                layer.msg(res.msg);
            }
            , error: function () {
                //请求异常回调
                return layer.msg('上传异常');
            }
        });

        //教师图片上传
        var uploadInst = upload.render({
            elem: '#teachI' //绑定元素
            , url: '/upload' //上传接口
            , before: function () {
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //上传完毕回调
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $("#teachImage").val(res.data);
                layer.msg(res.msg);
            }
            , error: function () {
                //请求异常回调
                return layer.msg('上传异常');
            }
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                }, function () {
                    $.ajax({
                        url: '/course/update',
                        data: JSON.stringify(data.field),
                        type: 'post',
                        contentType: 'application/json',
                        dataType: 'json',

                        success: function (res) {
                            if (res.code == 0) {
                                // 关闭弹出层
                                layer.close(index);
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);

                            } else {
                                layer.msg(res.msg)
                            }
                        }
                    });
                }
            );
            return false;
        });

        //重新加载select标签
        form.render("select");

    });
</script>
</body>
</html>